<template>
  <div class="main-container-process">

    <el-container class="container">
      <el-header>
        <header-layout :head_title="'Process Modeling'">
          <template slot="header_left_bottom">
            <el-row class="head-selecter">
              <el-col :span="8">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </template>
        </header-layout>
      </el-header>
      <el-main>
        <el-card
          ref="p_card"
          class="card-left"
        >
          <steps
            :p_card_w="p_card_w"
            :p_card_h="p_card_h"
          ></steps>
        </el-card>
        <el-card class="card-right">
          <el-tabs
            v-model="activeName"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              label="Step Monitor Time"
              name="first"
            >
              <tab-table :tableTitle="tableTitle"></tab-table>
            </el-tab-pane>
            <el-tab-pane
              label="Parameter"
              name="second"
            >
              <tab-table :tableTitle="tableTitle"></tab-table>
            </el-tab-pane>
            <el-tab-pane
              label="PI Impaction"
              name="third"
            >
              <tab-table :tableTitle="tableTitle"></tab-table>
            </el-tab-pane>
            <el-tab-pane
              label="Message"
              name="fourth"
            >
              <tab-table :tableTitle="tableTitle"></tab-table>
            </el-tab-pane>
            <el-tab-pane
              label="Tag Mapping"
              name="fifth"
            >
              <tab-table :tableTitle="tableTitle"></tab-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Steps from '@/pages/contents/system_configuration/ProcessModelingComponents/Steps'
import TabTable from './ProcessModelingComponents/TabTable'
export default {
  components: {
    Steps,
    TabTable,
    HeaderLayout: () => import('@/pages/contents/system_configuration/SysComponents/HeaderLayout')
  },
  data () {
    return {
      p_card_w: 0,
      p_card_h: 0,
      log: "updated by Bai Xiaoran,2019/03/15,11:00AM",
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      activeName: 'first',
      tableTitle: [{
        prop: 'one',
        label: 'Step Name'
      },
      {
        prop: 'two',
        label: 'Step Monitor Time'
      }
        ,
      {
        prop: 'three',
        label: 'Runtime'
      }
        ,
      {
        prop: 'four',
        label: 'Step Start Time'
      }
        ,
      {
        prop: 'five',
        label: 'Step End Time'
      }]
    }
  },
  methods: {
    handleTabClick (tab, event) {
      console.log(tab.label);
      switch (tab.label) {
        case 'Step Monitor Time':
          this.tableTitle = [
            {
              prop: 'one',
              label: 'Step Name'
            },
            {
              prop: 'two',
              label: 'Step Monitor Time'
            }
            ,
            {
              prop: 'four',
              label: 'Step Start Time'
            }
            ,
            {
              prop: 'five',
              label: 'Step End Time'
            }
          ]
          break;
        case 'Parameter':
          this.tableTitle = [
            {
              prop: 'one',
              label: 'Step Name'
            },
            {
              prop: 'two',
              label: 'Parameter ID'
            }
            ,
            {
              prop: 'three',
              label: 'Parameter Name'
            }
            ,
            {
              prop: 'four',
              label: 'RL+'
            }
            ,
            {
              prop: 'five',
              label: 'YL+'
            }
            ,
            {
              prop: 'six',
              label: 'Target(Setpoint)'
            }
            ,
            {
              prop: 'five',
              label: 'YL-'
            }
            ,
            {
              prop: 'five',
              label: 'RL-'
            }
            ,
            {
              prop: 'five',
              label: 'Comments'
            }
          ]
          break;
        case 'PI Impaction':
          this.tableTitle = [
            {
              prop: 'one',
              label: 'Step Name'
            },
            {
              prop: 'two',
              label: 'Parameter ID'
            }
            ,
            {
              prop: 'three',
              label: 'Parameter Name'
            }
            ,
            {
              prop: 'four',
              label: 'PIID'
            }
            ,
            {
              prop: 'five',
              label: 'PI Name'
            }
            ,
            {
              prop: 'six',
              label: 'Category'
            }
            ,
            {
              prop: 'five',
              label: 'Priority'
            }
            ,
            {
              prop: 'five',
              label: 'Comments'
            }
          ]
          break;
        case 'Message':
          this.tableTitle = [
            {
              prop: 'one',
              label: 'Step Name'
            },
            {
              prop: 'two',
              label: 'Message ID'
            }
            ,
            {
              prop: 'three',
              label: 'Message Tex'
            }
            ,
            {
              prop: 'four',
              label: 'Reaction ID'
            }
            ,
            {
              prop: 'five',
              label: 'Reaction'
            }
          ]
          break;
        case 'Tag Mapping':
          this.tableTitle = [
            {
              prop: 'one',
              label: 'Parameter ID'
            },
            {
              prop: 'two',
              label: 'Parameter Name'
            }
            ,
            {
              prop: 'three',
              label: 'Parameter Type'
            }
            ,
            {
              prop: 'four',
              label: 'Read/Write'
            }
            ,
            {
              prop: 'five',
              label: 'App Tag ID'
            }
            ,
            {
              prop: 'five',
              label: 'App Tag Name'
            }
            ,
            {
              prop: 'five',
              label: 'Comments'
            }
          ]
          break;
        default:
          break;
      }
    },
    handleResize () {
      this.p_card_w = this.$refs.p_card.$el.clientWidth;
      this.p_card_h = this.$refs.p_card.$el.clientHeight;
    }
  },
  mounted () {
    console.log(this.$refs.p_card)
    window.onresize = this.handleResize;
    this.p_card_w = this.$refs.p_card.$el.clientWidth;
    this.p_card_h = this.$refs.p_card.$el.clientHeight;
    // this.p_card_h = this.$refs.p_card;
  }, watch: {

  }
}
</script>
<style lang="less" scoped>
.head-selecter {
  clear: both;
  float: left;
  margin-top: -10px;
}
.main-container-process {
  height: 100%;
}
.container {
  height: 85%;
  position: relative;
}
.card-right {
  margin-left: 22%;
  height: 98%;
  position: absolute;
  width: 75%;
  border-radius: 10px;
  /deep/ .el-tabs__item {
    font-size: 25px;
    color: #7de4bc;
  }
  /deep/ .is-active {
    // font-size: 26px;
    color: #14d288;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #14d288;
  }
}
.card-left {
  overflow-y: auto;
  border-radius: 10px;
  height: 98%;
  width: 20%;
  position: absolute;
}
.card-left:hover {
  overflow-y: auto;
}
.el-main {
  margin-top: 40px;
}
</style>
